<template>
    <view class="register-container">
      <view style="margin-top: 120rpx;"></view>
      <view class="nav-bar">
        <view class="nav-left" @click="navigateBack">
          <uni-icons type="left" size="20" color="#333"/>
          <text class="nav-title">注册账号</text>
        </view>
      </view>
  
      <uni-forms ref="form" :model="formData" :rules="rules">
        <uni-forms-item name="name" required>
          <uni-easyinput
            v-model="formData.name"
            placeholder="请输入姓名"
          >
            <template v-slot:prefix>
              <uni-icons type="person" size="20" color="#666"></uni-icons>
            </template>
          </uni-easyinput>
        </uni-forms-item>
        
        <uni-forms-item name="phone" required>
          <uni-easyinput
            v-model="formData.phone"
            type="number"
            placeholder="请输入手机号"
            :maxlength="11"
          >
            <template v-slot:prefix>
              <uni-icons type="phone" size="20" color="#666"></uni-icons>
            </template>
          </uni-easyinput>
        </uni-forms-item>
        
        <uni-forms-item name="password" required>
          <uni-easyinput
            v-model="formData.password"
            type="password"
            placeholder="请输入密码"
          >
            <template v-slot:prefix>
              <uni-icons type="locked" size="20" color="#666"></uni-icons>
            </template>
          </uni-easyinput>
        </uni-forms-item>
  
        <uni-forms-item name="confirm_password" required>
          <uni-easyinput
            v-model="formData.confirm_password"
            type="password"
            placeholder="请确认密码"
          >
            <template v-slot:prefix>
              <uni-icons type="locked" size="20" color="#666"></uni-icons>
            </template>
          </uni-easyinput>
        </uni-forms-item>
      </uni-forms>
  
      <button 
        class="submit-btn" 
        :class="{'loading': loading}"
        @click="handleRegister"
        :disabled="loading"
      >
        <uni-icons v-if="loading" type="spinner-cycle" size="20" color="#fff"></uni-icons>
        <text>{{ loading ? '注册中...' : '注册' }}</text>
      </button>
    </view>
  </template>
  
  <script>
  import userApi from '@/utils/user.js'
  
  export default {
    data() {
      return {
        formData: {
          name: '',
          phone: '',
          password: '',
          confirm_password: '',
          roles: 'customer'  // 默认注册为客户角色
        },
        loading: false,
        rules: {
          name: {
            rules: [{ required: true, errorMessage: '请输入姓名' }]
          },
          phone: {
            rules: [
              { required: true, errorMessage: '请输入手机号' },
              { pattern: '^1[3-9]\\d{9}$', errorMessage: '请输入正确的手机号' }
            ]
          },
          password: {
            rules: [
              { required: true, errorMessage: '请输入密码' },
              { minLength: 6, errorMessage: '密码不能少于6位' }
            ]
          },
          confirm_password: {
            rules: [
              { required: true, errorMessage: '请确认密码' },
              {
                validateFunction: (rule, value, data, callback) => {
                  if (value !== this.formData.password) {
                    callback('两次输入的密码不一致')
                  }
                  return true
                }
              }
            ]
          }
        }
      }
    },
    methods: {
      navigateBack() {
        uni.navigateBack()
      },
      async handleRegister() {
        try {
          // 表单验证
          await this.$refs.form.validate()
          
          this.loading = true
          // 调用注册接口
          await userApi.registerUser(this.formData)
          
          uni.showToast({
            title: '注册成功',
            icon: 'success'
          })
          
          // 延迟返回登录页
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
          
        } catch (error) {
          uni.showToast({
            title: error.message || '注册失败',
            icon: 'none'
          })
        } finally {
          this.loading = false
        }
      }
    }
  }
  </script>
  
  <style>
  .register-container {
    padding: 0 30rpx;
    min-height: 100vh;
    background-color: #fff;
  }
  
  .nav-bar {
    display: flex;
    align-items: center;
    height: 88rpx;
    margin: 0 -30rpx;
    padding: 0 30rpx;
    border-bottom: 1rpx solid #eee;
  }
  
  .nav-left {
    display: flex;
    align-items: center;
    font-size: 32rpx;
  }
  
  .nav-title {
    margin-left: 20rpx;
    font-weight: 500;
  }
  
  .submit-btn {
    width: 100%;
    height: 88rpx;
    background: #007AFF;
    color: #fff;
    border-radius: 12rpx;
    font-size: 32rpx;
    margin-top: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rpx;
  }
  
  .submit-btn.loading {
    opacity: 0.7;
    background: #66b1ff;
  }
  
  :deep(.uni-forms-item) {
    margin-bottom: 30rpx;
  }
  
  :deep(.uni-easyinput__content) {
    background-color: #f5f5f5;
    border-radius: 12rpx;
    height: 88rpx;
  }
  </style>